<template>
    <!-- 
        页面以 QS （勤瘦） 为主命名
        每个页面再根据页面内容，添加不同命名后续 （如登录页 - loading）
        页面内命名都以本页面主题为开头，加功能后缀 如：loading-confirm-btn
        本页面主题:homePage
     -->
    <div class="QS-content-template QS-homePage">

        <div class="makeFoods_label">
            <span class="makeFoods_label_tip">标题</span>
            <div class="makeFoods_input">
                <el-input 
                    v-model="title"
                    placeholder="请输入标题"
                    clearable
                    readonly
                ></el-input>
            </div>
        </div>
        <div class="share_box">
            <div v-for="(item,index) in shareList" :key="index" class="share_label banner_image">
                <el-image 
                    class="share_image"
                    :src="item.url" 
                    :preview-src-list="item.srcList">
                </el-image>
                <div class="share_cansole">
                    <el-button type="text" class="el-icon-delete banner_del" @click="delBannerImage"></el-button>
                </div>
            </div>
        </div>
        <div class="makeFoods_btn">
            <!-- <el-button @click="resetInfo" type="info" plain>重置</el-button> -->
            <el-button @click="makeFoodsConfirm" type="primary">添加</el-button>
        </div>



        <el-dialog
            title="变更首页展示图片"
            :visible.sync="dialogVisible"
            width="70%"
        >
            <div class="mall_add">
                <div class="makeFoods_label">
                    <span class="makeFoods_label_tip">标题</span>
                    <div class="makeFoods_input">
                        <el-input 
                            v-model="addTitle"
                            placeholder="请输入标题"
                            clearable
                        ></el-input>
                    </div>
                </div>
                <!-- 上传图片墙 -->
                <div class="makeFoods_label">
                    <span class="makeFoods_label_tip">商品图片</span>
                    <div class="makeFoods_input">
                        <el-upload
                            :action="$commonFunc.imageAPI()"
                            list-type="picture-card"
                            :on-preview="handlePictureCardPreview"
                            :on-remove="handleRemove"
                            :on-success="handleAvatarSuccess"
                        >
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :visible.sync="mallImageVisible">
                            <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>
                    </div>
                </div>
                
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addMallConfirm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>

export default {
	components: {
	
	},
	data(){
		return {
            title:'',//标题
            shareList:[],//分享页展示列表
            dialogVisible:false,//dialog flag
            addTitle:'',//添加标题
            mallImageVisible:false,//添加图片预览flag
            dialogImageUrl:'',//添加图片链接
		}
    },
    mounted(){
        for(var i = 0;i < 2;i ++){
            this.shareList.push({
                url:require('../assets/image/image01.jpg'),//分享页图片展示
                srcList:[require('../assets/image/image01.jpg')],//分享页图片预览功能数组 - 可多图片
            });
        }
    },
    methods:{
        // this.$router.push('/GDPLHasReturned');
        delBannerImage(){
            this.$confirm('确定要删除吗?', '', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                // type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        makeFoodsConfirm(){
            this.dialogVisible = true;
        },
        // resetInfo(){

        // },
        handleRemove(file, fileList) {//上传图片墙
            console.log('file, fileList');
            console.log(file, fileList);
            console.log('this.dialogImageUrl',file)
            console.log('this.dialogImageUrl',fileList)
        },
        handlePictureCardPreview(file) {//上传图片墙
            console.log('file',file)
            this.dialogImageUrl = file.url;
            this.mallImageVisible = true;
        },
        addMallConfirm(){//添加确认按钮

        },
        uploadPhoto(){
            this.$fetch("attachment/upload",{
                // userId:sessionStorage.getItem("userId"),
            }).then(res=>{
                console.log(res)
                
            })
        },
        handleAvatarSuccess(res, file) {
            console.log('res',res);
            console.log('file',file);
            this.imageUrl = URL.createObjectURL(file.raw);
            // this.imageUrl = file.response.data.filePath;
            console.log('this.imageUrl',this.imageUrl);
        },
    }
}
</script>